<template>
	<view class="exclusive-tutorial-page">

		<!-- 顶部视频Banner预留 -->
		<view class="video-banner">
			<video src="https://ryecloud-bucket.oss-cn-beijing.aliyuncs.com/yanying.mp4"></video>
		</view>

		<!-- 教程信息 -->
		<view class="info-card">
			<view class="title-row">
				<text class="title">专属教程 / {{ state.title }}</text>
				<text class="iconfont icon-heart">收藏</text>
			</view>
			<view class="desc">总时长
				<text class="highlight">{{ state.duration }}</text>
				分钟
			</view>
			<view class="intro">
				{{ state.desc }}
			</view>

			<view class="materials">
				<view class="materials-title">要用到的</view>
				<view class="material-tabs">
					<text
							class="tab"
							:class="{ active: state.activeTab === 'cosmetics' }"
							@click="changeTab('cosmetics')"
					>化妆品</text>

					<text
							class="tab"
							:class="{ active: state.activeTab === 'tools' }"
							@click="changeTab('tools')"
					>化妆工具</text>
				</view>
				<view class="material-items">
					<view v-for="(item, index) in state.makeupItems" :key="index" class="item">
						<view class="item-img">
							<image :src="item.img"></image>
						</view>
						<text class="item-name">{{ item.name }}</text>
					</view>
				</view>
			</view>

			<view class="steps">
				<view class="steps-title">图文教程</view>
				<view v-for="(step,index) in state.stepsList" :key="index" class="step">
					<image :src="getRandomImage()" class="step-img"></image>
					<view class="step-content">
						<text class="step-title">{{ step.title }}</text>
						<text class="step-desc">{{ step.desc }}</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
import {onLoad} from "@dcloudio/uni-app";
import {reactive} from "vue";

const state = reactive({
	title: '方圆脸自然妆',
	activeTab: 'cosmetics',
	makeupItems: [
		{ name: '粉底液', img: 'https://ribotrade-oss-cn-beijing.aliyuncs.com/2025/05/0469b72273290d486ab50fde4d79e5b12dimage.png' },
		{ name: '眼影盘', img: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/04516aba0605a54a87af96eef96fe25318image.png' },
		{ name: '修容盘', img: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/04c592da53e6214a508e4892ee8ba7a15cimage.png' },
		{ name: '口红', img: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/042fb2c27bc84a4513bb136bb6e83b5094image.png' }
	],
	imgPool: [
			"https://ribotrade-oss-cn-beijing.aliyuncs.com/2025/05/0469b72273290d486ab50fde4d79e5b12dimage.png",
			"https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/04516aba0605a54a87af96eef96fe25318image.png",
			"https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/04c592da53e6214a508e4892ee8ba7a15cimage.png",
			"https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/042fb2c27bc84a4513bb136bb6e83b5094image.png",
			"https://ribotrade-oss-cn-beijing.aliyuncs.com/2025/05/0469b72273290d486ab50fde4d79e5b12dimage.png",
			"https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/04516aba0605a54a87af96eef96fe25318image.png",
			"https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/04c592da53e6214a508e4892ee8ba7a15cimage.png",
			"https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/042fb2c27bc84a4513bb136bb6e83b5094image.png",
	]
})

const makeupItemsCosmetics = [
	{ name: '粉底液', img: 'https://ribotrade-oss-cn-beijing.aliyuncs.com/2025/05/0469b72273290d486ab50fde4d79e5b12dimage.png' },
	{ name: '眼影盘', img: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/04516aba0605a54a87af96eef96fe25318image.png' },
	{ name: '修容盘', img: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/04c592da53e6214a508e4892ee8ba7a15cimage.png' },
	{ name: '口红', img: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/042fb2c27bc84a4513bb136bb6e83b5094image.png' }
];

const makeupItemsTools = [
	{ name: '化妆刷', img: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/05c3227539c6114c15b7aa3d1f58f5e877image.png' },
	{ name: '美妆蛋', img: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/05ca6f2e8d89e943d58122c1321b6e303bimage.png' },
	{ name: '睫毛夹', img: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/055753203a83214b86900e3f702ac4d466image.png' },
	{ name: '化妆棉', img: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/0528b985f6e92a43c8a3b79cbc76bce961image.png' }
];

const stepsList = [
	{
		title: '妆前',
		desc: '步骤详细步骤详细步骤详细步骤详细步骤',
		img: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/04172b1f27b76f4fa697460ca7d6ca92e8image.png'
	},
	{
		title: '底妆',
		desc: '步骤详细步骤详细步骤详细步骤详细步骤',
		img: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/04172b1f27b76f4fa697460ca7d6ca92e8image.png'
	},
	{
		title: '遮瑕',
		desc: '步骤详细步骤详细步骤详细步骤详细步骤',
		img: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/04172b1f27b76f4fa697460ca7d6ca92e8image.png'
	},
	{
		title: '眼妆',
		desc: '步骤详细步骤详细步骤详细步骤详细步骤',
		img: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/04172b1f27b76f4fa697460ca7d6ca92e8image.png'
	}
];

// 随机抽取imgPool中的图片
function getRandomImage(){
	const pool = state.imgPool;
	let index = Math.floor(Math.random() * 10);
	console.log(index, pool[index])
	return "https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/051789c42c773e4cb5aeb08482c5f0311cimage.png";
}

function changeTab(tab) {
	state.activeTab = tab;
	if (tab === 'cosmetics') {
		state.makeupItems = makeupItemsCosmetics;
	} else if (tab === 'tools') {
		state.makeupItems = makeupItemsTools;
	}
}

onLoad((options) => {
	state.title = options.title || '方圆脸自然妆';
	state.desc = options.desc || '暂无描述';
	state.duration = options.duration || '0';
	state.difficulty = options.difficulty || '★';

	try {
		state.stepsList = options.stepsList ? JSON.parse(decodeURIComponent(options.stepsList)) : [];
	} catch {
		state.stepsList = [];
	}
});


</script>

<style lang="scss" scoped>
.exclusive-tutorial-page {
	background-color: #fff;
}

//.video-banner {
//	position: relative;
//	height: 400rpx;
//
//	image {
//		width: 100%;
//		height: 100%;
//	}
//
//	.play-btn {
//		position: absolute;
//		top: 50%;
//		left: 50%;
//		transform: translate(-50%, -50%);
//		width: 100rpx;
//		height: 100rpx;
//		background: rgba(0, 0, 0, 0.5);
//		border-radius: 50%;
//	}
//}

.info-card {
	position: relative;
	margin-top: -40rpx;
	z-index: 100;
	background-color: #fff;
	border-radius: 30rpx 30rpx 0 0;
	padding: 30rpx;
	box-shadow: 0 -6rpx 16rpx rgba(0, 0, 0, 0.08);
}

.title-row {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.title {
		font-size: 38rpx;
		font-weight: bold;
	}

	.icon-heart {
		font-size: 36rpx;
		color: #ff7aa5;
	}
}

.desc {
	margin-top: 20rpx;
	color: #333;

	.highlight {
		color: #ff7aa5;
		font-weight: bold;
	}
}

.intro {
	margin-top: 15rpx;
	color: #666;
	font-size: 26rpx;
}

.materials {
	padding: 40rpx;
	margin-top: 30rpx;
	background-color: #fff;
	border-radius: 40rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

	.materials-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.material-tabs {
		display: flex;
		border-bottom: 2rpx solid #f2f2f2;
		padding-bottom: 10rpx;

		.tab {
			font-size: 28rpx;
			color: #333;
			margin-right: 40rpx;
		}

		.active {
			color: #ff7aa5;
			font-weight: bold;
			border-bottom: 4rpx solid #ff7aa5;
			padding-bottom: 6rpx;
		}
	}

	.material-items {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 30rpx;

		.item {
			width: 40%;
			margin-bottom: 30rpx;
			display: flex;
			align-items: center;
			background: linear-gradient(135deg, rgba(255, 216, 230, 0.5), rgba(255, 240, 245, 0.8));
			border-radius: 40rpx;
			padding: 16rpx;
			box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);

			.item-img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 20rpx;
				background-color: #fff;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 70%;
					height: 70%;
				}
			}

			.item-name {
				font-size: 26rpx;
				color: #333;
				margin-left: 20rpx;
			}
		}
	}
}


.steps-title {
	font-weight: bold;
	margin-top: 40rpx;
}

.step {
	display: flex;
	padding: 30rpx;
	margin-top: 20rpx;
	background: #ffeff3;
	border-radius: 40rpx;

	.step-img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 40rpx;
		background-color: #FEF9F6;
	}

	.step-content {
		background-color: #FEF9F6;
		margin-left: 20rpx;
		width: 60%;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		border-radius: 40rpx;
	}
}

.step-title {
	font-weight: bold;
}

.step-desc {
	font-size: 20rpx;
	color: #666;
	margin-top: 20rpx;
}

.video-banner {
	width: 100%;
	height: 400rpx;
	overflow: hidden;
	margin-bottom: 15rpx;

	video {
		width: 100%;
		height: 100%;
		object-fit: cover; // 视频横屏铺满的关键样式
	}
}

</style>
